<html>
  <head>
    <title>SIMILE Widgets | Timeline | Examples | Compact Painter 2</title>
    <link rel='stylesheet' href='../styles.css' type='text/css' />

    <script src="../../api/lib/require.js" type="text/javascript"></script>
    <script>
require(["../../api/configs/local-config"], function() {
    require(["timeline", "jquery"], function(Timeline, $) {
        var tl;
        var onLoad = function() {
          var eventSource = new Timeline.DefaultEventSource(0);
          
          var theme = Timeline.ClassicTheme.create();
          theme.event.instant.iconWidth += 4; // Add padding and borders
          theme.event.instant.iconHeight += 4;
          
          var d = Timeline.DateTime.parseGregorianDateTime("1900")
          var bandInfos = [
              Timeline.createBandInfo({
                  width:          "90%", 
                  intervalUnit:   Timeline.DateTime.DECADE, 
                  intervalPixels: 150,
                  eventSource:    eventSource,
                  date:           d,
                  theme:          theme,
                  eventPainter:   Timeline.CompactEventPainter,
                  eventPainterParams: {
                      iconWidth:      60,
                      iconHeight:     60,
                      iconLabelGap:   3
                  }
              }),
              Timeline.createBandInfo({
                  width:          "10%", 
                  intervalUnit:   Timeline.DateTime.CENTURY, 
                  intervalPixels: 100,
                  eventSource:    eventSource,
                  date:           d,
                  theme:          theme,
                  layout:         'overview'  // original, overview, detailed
              })
          ];
          bandInfos[1].syncWith = 0;
          bandInfos[1].highlight = true;
          
          tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
          tl.loadJSON("data2.json?"+ (new Date().getTime()), function(json, url) { eventSource.loadJSON(json, url); });
          Timeline.writeVersion('tl_ver');
        };

        var resizeTimerID = null;
        var onResize = function() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    tl.layout();
                }, 500);
            }
        };

        $(document).ready(onLoad);
        document.onresize = onResize;
    });
});
    </script>
    <style>
        div.timeline-event-icon {
            border: 1px solid #aaa;
            padding: 1px;
            background: white;
        }
        div.timeline-event-icon-default {
            border: none;
            padding: 0px;
        }
    </style>
  </head>
  <body>
    <ul id="path">
      <li><a href="/" title="Home">SIMILE Widgets</a></li>
      <li><a href="../../" title="Timeline">Timeline</a></li>
      <li><a href="../" title="Examples">Examples</a></li>
      <li><span>Compact Painter 2</span></li>
    </ul>
  
    <div id="header">
      <h1>Compact Painter Example 2</h1>
    </div>
  
    <div id="content">
      <p>Timeline version <span id='tl_ver'></span>.</p>
    
      <div id="tl" class="timeline-default" style="height: 600px;"></div>
    </div>
    
    <div id="footer">
      Copyright &copy; <a href="http://web.mit.edu/">Massachusetts Institute of Technology</a> and Contributors 2006-2009 ~ Some rights reserved
    </div>
  </body>
</html>
